<template>
  <div class="app-container">
    <!-- <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      label-width="90px"
    >
      <el-form-item class="mr" label="设备名称" prop="gateNo">
        <el-input placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item class="mr" label="设备型号" prop="gateNo1">
        <el-input placeholder="请输入" clearable />
      </el-form-item>
      <el-form-item class="mr" label="设备状态" prop="monitorDevice">
        <el-select
          v-model="queryParams.monitorDevice"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="{ label, value } in sys_basicequ_status"
            :key="value"
            :label="label"
            :value="value"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="mr" label="所在区域" prop="state">
        <el-select v-model="queryParams.state" placeholder="请选择" clearable>
          <el-option
            v-for="{ label, value } in zoneOptions"
            :key="value"
            :label="label"
            :value="value"
          />
        </el-select>
      </el-form-item>
      <el-form-item style="float: right; margin-right: 45px">
        <el-button type="primary" icon="Search">搜索</el-button>
        <el-button icon="Refresh">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['emergency:mats:add']"
          >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['emergency:mats:edit']"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['emergency:mats:remove']"
          >删除</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['emergency:mats:export']"
          >导出
        </el-button>
      </el-col>
    </el-row> -->
    <div style="width: 100%">
      <el-row :gutter="20">
        <el-col :span="6" v-for="n in   12  ">
          <div class="grid-content ep-bg-purple">
            <h3>{{ n }}号区域</h3>
            <div class="icon">
              <svg-icon class-name="light-on" />
            </div>
            <div class="button r" id="button">
              <input type="checkbox" class="checkbox" :checked="status[n - 1]" />
              <div class="knobs"></div>
              <div class="layer"></div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
      @pagination="getList" style="margin-top: 10px" /> -->
  </div>
</template>
<script setup>
import _imports_0 from '@/assets/images/lighting.png'

import { zoneTreeSelect } from '@/api/emergency/mats'
import { list } from '@/api/list'

const status = reactive([true, false, true, false, true, false, true, false, true, false, true, false]);

/* 获取单位字典 */
const { sys_basicequ_status } = proxy.useDict('sys_basicequ_status')

const single = ref(true)
const multiple = ref(true)
const zoneOptions = ref([])
const total = ref(20)

const data = reactive({
  queryParams: { pageNum: 1, pageSize: 10 }
})
const { queryParams } = toRefs(data)

/** 存放位置树结构 */
function getZoneTree()
{
  return zoneTreeSelect().then((response) =>
  {
    zoneOptions.value = response.data
  })
}

function getList() { }

function handleAdd() { }

function handleUpdate() { }

function handleDelete() { }

function handleExport() { }

// 获取最新搜索下拉选项
getZoneTree()

getList()

list().then((res) =>
{
  console.log('res', res);
})
</script>
<style lang="scss" scoped>
.mr {
  margin-right: 10px;
}

:deep .pagination-container {
  height: 56px;
}

.img-item {
  margin-bottom: 15px;
}

.imgStyle {
  width: 100%;
}

.box {
  background-color: #f4bf00;
  width: 100%;
  height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  h3 {
    color: #fcebeb;
  }
}

* {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

*:focus {
  outline: none;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  background-color: #f1f9f9;
}

#app-cover {
  display: table;
  width: 600px;
  margin: 40px auto;
  counter-reset: button-counter;
}

.row {
  display: table-row;
}

.toggle-button-cover {
  display: table-cell;
  position: relative;
  width: 200px;
  height: 140px;
  box-sizing: border-box;
}

.button-cover {
  height: 100px;
  margin: 20px;
  background-color: #fff;
  box-shadow: 0 10px 20px -8px #c5d6d6;
  border-radius: 4px;
}

.button-cover:before {
  counter-increment: button-counter;
  content: counter(button-counter);
  position: absolute;
  right: 0;
  bottom: 0;
  color: #d7e3e3;
  font-size: 12px;
  line-height: 1;
  padding: 5px;
}

.button-cover,
.knobs,
.layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.button {
  position: relative;
  width: 100px;
  height: 36px;
  margin: -20px auto 0 auto;
  overflow: hidden;
}

.button.r,
.button.r .layer {
  border-radius: 100px;
}

.button.b2 {
  border-radius: 2px;
}

.checkbox {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 3;
}

.knobs {
  z-index: 2;
}

.layer {
  width: 100%;
  background-color: #ebf7fc;
  transition: 0.3s ease all;
  z-index: 1;
}

/* Button 1 */
#button .knobs:before {
  content: '开';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 28px;
  height: 28px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  padding: 9px 4px;
  background-color: #03a9f4;
  border-radius: 50%;
  transition: 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15) all;
}

#button .checkbox:checked+.knobs:before {
  content: '关';
  left: 68px;
  background-color: #f44336;
}

#button .checkbox:checked~.layer {
  background-color: #fcebeb;
}

#button .knobs,
#button .knobs:before,
#button .layer {
  transition: 0.3s ease all;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  background-color: #03a9f4;
}
</style>
